<template>
  <div>
    <div id="wordCloud1"></div>
  </div>
</template>

      <script>
import echartMixins from "@/utils/resizeMixins";
export default {
  data() {
    return {
      chart: ""
    };
  },
  mixins: [echartMixins],
  mounted() {
    this.initChart();
  },
  methods: {
    initChart() {
      // 基于准备好的dom，初始化echarts实例
      this.chart = this.$echarts.init(document.getElementById("wordCloud1"));

      let wordCloud_data = [
        {
          name: "Jayfee",
          value: 666
        },
        {
          name: "Nancy",
          value: 520
        },
        {
          name: "生活资源",
          value: "999"
        },
        {
          name: "供热管理",
          value: "888"
        },
        {
          name: "供气质量",
          value: "777"
        },
        {
          name: "生活用水管理",
          value: "688"
        },
        {
          name: "一次供水问题",
          value: "588"
        },
        {
          name: "交通运输",
          value: "516"
        },
        {
          name: "城市交通",
          value: "515"
        },
        {
          name: "环境保护",
          value: "483"
        },
        {
          name: "房地产管理",
          value: "462"
        },
        {
          name: "城乡建设",
          value: "449"
        },
        {
          name: "社会保障与福利",
          value: "429"
        },
        {
          name: "社会保障",
          value: "407"
        },
        {
          name: "文体与教育管理",
          value: "406"
        },
        {
          name: "公共安全",
          value: "406"
        },
        {
          name: "公交运输管理",
          value: "386"
        },
        {
          name: "出租车运营管理",
          value: "385"
        },
        {
          name: "供热管理",
          value: "375"
        },
        {
          name: "市容环卫",
          value: "355"
        },
        {
          name: "自然资源管理",
          value: "355"
        },
        {
          name: "粉尘污染",
          value: "335"
        },
        {
          name: "噪声污染",
          value: "324"
        }
      ];

      this.chart.setOption({
        tooltip: {
    show: true,
    // formatter: (params) => {
    //     const { name, value } = params;
    //     return `${name}:${value}`;
    // },
  },

  series: [
    {
      type: 'wordCloud',
      //size: ['9%', '99%'],
      sizeRange: [14, 50],
      //textRotation: [0, 45, 90, -45],
      rotationRange: [-45, 90],
      shape: 'circle',
      textPadding: 0,
      width: '80%',
      // 画布高
      height: '80%',
      autoSize: {
        enable: true,
        minSize: 6,
      },
      textStyle: {
        normal: {
          color: function () {
            return (
              'rgb(' +
              [Math.round(Math.random() * 256), Math.round(Math.random() * 256), Math.round(Math.random() * 256)].join(
                ','
              ) +
              ')'
            );
          },
        },
        emphasis: {
          shadowBlur: 2,
          shadowColor: '#333',
        },
      },
      data: wordCloud_data,
    },
  ],
      });
    }
  },
  beforeDestroy() {
    //   console.log(this.chart);
    this.chart.dispose();
    this.chart = "";
    // console.log('------------------销毁阶段------------------')
    // console.log(this.chart);
    // 仍可以使用data与method方法
    //   console.log(`这是beforeDestroy的执行:${this.name}`)
  }
};
</script>

      <style lang="scss" scoped>
#wordCloud1 {
  width: 100%;
  height: 40vh;
  // background-color: aliceblue;
}
</style>